<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="selectAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="taskName"
      @keydown.enter="addTask(task)"
    />
  </header>
</template>

<script>
import {  mapMutations,mapState,mapGetters} from 'vuex';
export default {
  data() {
    return {
      taskName:''
    }
  },
  computed: {
    ...mapState(['tasklist']),
    ...mapGetters(['taskStatusList']),
    task() {
      return {id:this.tasklist.length!==0?this.tasklist[this.tasklist.length - 1].id+1:100,name:this.taskName,isDone:false}
    },
    selectAll: {
      set(val) {
        this.taskStatusList.forEach(item=>item.isDone =val)
      },
      get() {
        return this.taskStatusList.every(item=>item.isDone)
      }
    }
  },
  methods: {
    ...mapMutations(['addTask'])
  }
}
</script>
